<template>
  <div class="wrapper">
    <el-scrollbar max-height="600px">
      <div class="wrapper-inner">
        <el-timeline>
          <el-timeline-item
            v-for="(record, index) in historyRecords"
            :key="index"
            :timestamp="
              record.start +
              ' 至 ' +
              record.end +
              ' (数据于 ' +
              record.stamp +
              ' 最后修改)'
            "
            placement="top"
            :color="
              matchColor(
                computedTotalCapacity(index).value /
                  computedTotalCapacity(index).valueFull
              )
            "
          >
            <!-- 
                        :icon="
              matchIcon(
                computedTotalCapacity(index).value /
                  computedTotalCapacity(index).valueFull
              )
            "
           -->
            <div class="detail-container">
              <el-collapse>
                <el-collapse-item
                  ><template #title>
                    <div
                      style="
                        width: 100%;
                        margin: 0 12px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        /* margin-bottom: 24px; */
                        font-weight: bold;
                        font-size: 16px;
                      "
                    >
                      <span style="display: flex; align-items: center">
                        <el-button
                          link
                          plain
                          style="font-size: 16px; margin-right: 6px"
                          :color="
                            matchColor(
                              computedTotalCapacity(index).value /
                                computedTotalCapacity(index).valueFull
                            )
                          "
                          :icon="
                            matchIcon(
                              computedTotalCapacity(index).value /
                                computedTotalCapacity(index).valueFull
                            )
                          "
                        ></el-button>
                        <span style="padding-right: 16px">终端区通行能力:</span>
                        <span>{{ computedTotalCapacity(index).value }}</span>
                        <span style="padding: 0 4px">/</span>
                        <span>{{
                          computedTotalCapacity(index).valueFull
                        }}</span>
                        <span style="padding: 0 8px">,</span>

                        <span>{{
                          Math.round(
                            (computedTotalCapacity(index).value /
                              computedTotalCapacity(index).valueFull) *
                              100
                          )
                        }}</span>
                        <span style="padding: 0 4px">%</span>
                      </span>
                      <span>
                        <el-link type="primary">查看详情</el-link>
                      </span>
                    </div>
                  </template>
                  <el-table :data="record.content">
                    <el-table-column
                      prop="areaName"
                      label="分区"
                      width="80"
                    ></el-table-column>
                    <el-table-column
                      prop="areaTypeName"
                      label="分区类型"
                      width="200"
                    >
                      <template #default="scope">
                        <div
                          style="
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                          "
                        >
                          <el-tag style="margin-right: 8px">{{
                            scope.row.areaType
                          }}</el-tag>
                          <span>{{ scope.row.areaTypeName }}</span>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="原通行能力"
                      width="150"
                      align="center"
                    >
                      <template #default="scope">
                        <span>{{ scope.row.originalCapacity }}&nbsp;架/时</span>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column
                      label="通行能力"
                      min-width="100"
                      align="center"
                    >
                      <template #default="scope">
                        <span>{{ scope.row.currentCapacity }}&nbsp;架/时</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="通行能力%"
                      min-width="100"
                      align="center"
                    >
                      <template #default="scope">
                        <span
                          >{{
                            Math.round(scope.row.capacityRatio * 110)
                          }}&nbsp;%</span
                        >
                      </template>
                    </el-table-column> -->
                    <el-table-column
                      label="实际通行能力"
                      width="200"
                      align="center"
                    >
                      <template #default="scope">
                        <div
                          style="
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin: 0 16px;
                          "
                        >
                          <span
                            >{{ scope.row.currentCapacity }}&nbsp;架/时</span
                          >
                          <!-- <span style="padding: 0 12px">|</span> -->
                          <span
                            >{{
                              Math.round(scope.row.capacityRatio * 100)
                            }}&nbsp;%</span
                          >
                        </div>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column
                      prop="weatherProbability"
                      label="天气概率"
                      min-width="100"
                    ></el-table-column>
                    <el-table-column
                      prop="weatherCoverage"
                      label="天气覆盖"
                      min-width="100"
                    ></el-table-column>
                    <el-table-column
                      prop="weatherIntensity"
                      label="天气强度"
                      min-width="100"
                    ></el-table-column> -->
                    <el-table-column
                      label="天气概率/覆盖/强度"
                      width="200"
                      align="center"
                    >
                      <template #default="scope">
                        <span>{{ scope.row.weatherProbability }}</span>
                        <span style="padding: 0 16px">/</span>
                        <span>{{ scope.row.weatherCoverage }}</span>
                        <span style="padding: 0 16px">/</span>
                        <span>{{ scope.row.weatherIntensity }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import dateFormat from "@/utils/dateFormat.js";
import useCapacityStore from "@/store/capacity.js";
const capacityStore = useCapacityStore();
const historyRecords = computed(() => capacityStore.historyRecords);

const computedTotalCapacity = (index) => {
  return capacityStore.computedTotalCapacity(index, true);
};

const matchColor = (ratio) => {
  if (ratio >= 0.9) return "#67C23A";
  if (ratio >= 0.7) return "#E6A23C";
  return "#F56C6C";
};

const matchIcon = (ratio) => {
  if (ratio >= 0.9) return "CircleCheck";
  if (ratio >= 0.7) return "Warning";
  return "Warning";
};

const shownDetails = ref([]);
const handleSwitchDetailShown = (index) => {
  if (shownDetails.indexOf(index)) {
    //
  }
};
</script>

<style scoped>
.wrapper {
}

.wrapper-inner {
  padding: 24px;
}

.detail-container {
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, 0.05);
  background-color: rgba(128, 128, 128, 0.05);
  transition: all 0.25s ease-in-out;
}

.detail-container:hover {
  border: 1px solid rgba(128, 128, 128, 0.07);
  background-color: rgba(128, 128, 128, 0.07);
  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.25);
}
</style>
